<template>
	<div class="h-full flex flex-col">
		<!-- 列表 -->
		<a-card class="mt-[10px]">
			<template #extra>
				<a-button class="border-none" icon="rollback" @click="rollback"
					>{{ $t('app.setting.themecolor.rr99') }}
				</a-button>
			</template>
			<div class="Temi">
				<div>
					<span style="margin-right: 10px">{{ $t('Please') }}:</span>
					<a-range-picker
						@change="onChange"
						style="margin-right: 10px"
					/>
				</div>
				<div>
					<span style="margin-right: 10px">{{ $t('Please') }}:</span>
					<a-range-picker
						@change="onChange"
						style="margin-right: 10px"
					/>
					<a-button type="primary" icon="search" @click="Temi()">
						{{ $t('Search') }}
					</a-button>
				</div>
				<div>
					<a-button type="primary" @click="exports()">
						{{ $t('derive') }}
					</a-button>
				</div>
			</div>
			<a-table
				ref="table"
				size="middle"
				class="h-full overflow-x-auto"
				:dataSource="listData"
				:pagination="false"
				:loading="listLoading"
				:customRow="rowClick"
				:rowKey="(record) => record.Id"
			>
				<!--运营事件ID----------------------->
				<a-table-column
					key="OptId"
					width="140px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(1)
						}
					"
				>
					<span slot="title" class="min-w-90p">运营事件ID</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="ç"
							:single-search="false"
							:filter-data="filterData"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
							@searchFilter="searchQueryFilter"
						/>
					</span>
					<template slot-scope="record">
						{{ record.OptId }}
					</template>
				</a-table-column>
				<!--运营事件描述 -->
				<a-table-column
					key="OptDescribe"
					data-index="OptDescribe"
					width="180px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(2)
						}
					"
				>
					<span slot="title" class="min-w-90p">运营事件描述</span>

					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect1"
							:filter-data="filterData"
							@searchCommit="searchQuery"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{
							record.OptDescribe
						}}</span>
					</template>
				</a-table-column>
				<!-- 运用事件来源 -->
				<a-table-column
					key="OptSource"
					data-index="OptSource"
					width="180px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(3)
						}
					"
				>
					<span slot="title" class="min-w-90p">运用事件来源</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect2"
							:filter-data="filterData"
							@searchCommit="searchQuery"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{
							record.OptSource
						}}</span>
					</template>
				</a-table-column>
				<!-- 提报人  -->
				<a-table-column
					key="OptCreateUserId"
					data-index="OptCreateUserId"
					width="120px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(4)
						}
					"
				>
					<span slot="title" class="min-w-90p">提报人 </span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect3"
							:filter-data="[]"
							@searchCommit="searchQuery"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{
							record.OptCreateUserId
						}}</span>
					</template>
				</a-table-column>
				<!-- 提报人邮箱   -->
				<a-table-column
					key="OptCreateUserEmail"
					data-index="OptCreateUserEmail"
					width="160px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(5)
						}
					"
				>
					<span slot="title" class="min-w-90p">提报人邮箱 </span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect3"
							:filter-data="filterData"
							@searchCommit="searchQuery"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{
							record.OptCreateUserEmail
						}}</span>
					</template>
				</a-table-column>
				<!-- 提报人部门 -->
				<a-table-column
					key="OptCreateUserDepartment"
					data-index="OptCreateUserDepartment"
					width="120px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(6)
						}
					"
				>
					<span slot="title" class="min-w-90p"> 提报人部门 </span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect4"
							:single-search="false"
							:filter-data="filterData"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{
							record.OptCreateUserDepartment
						}}</span>
					</template>
				</a-table-column>
				<!-- 首次提交时间 -->
				<a-table-column
					key="OptCreateTime"
					data-index="OptCreateTime"
					width="160px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(7)
						}
					"
				>
					<span slot="title" class="min-w-90p">首次提交时间</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect5"
							:single-search="false"
							:filter-data="filterData"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>

					<template slot-scope="text, record">
						<span style="display: block">{{
							record.OptCreateTime
						}}</span>
					</template>
				</a-table-column>
				<!-- 解决时间  -->
				<a-table-column
					key="OptFinishTime"
					data-index="OptFinishTime"
					width="160px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(8)
						}
					"
				>
					<span slot="title" class="min-w-90p">解决时间</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect5"
							:single-search="false"
							:filter-data="filterData"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>

					<template slot-scope="text, record">
						<span style="display: block">{{
							record.OptFinishTime
						}}</span>
					</template>
				</a-table-column>
				<!-- 所属模块 -->
				<a-table-column
					key="OptRelatedModule"
					data-index="OptRelatedModule"
					width="110px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(9)
						}
					"
				>
					<span slot="title" class="min-w-90p">所属模块</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect5"
							:single-search="false"
							:filter-data="filterData"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>

					<template slot-scope="text, record">
						<span style="display: block">{{
							record.OptRelatedModule
						}}</span>
					</template>
				</a-table-column>
				<!-- 关联的任务名称 -->
				<a-table-column
					key="OptRelatedTaskName"
					data-index="OptRelatedTaskName"
					width="140px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(10)
						}
					"
				>
					<span slot="title" class="min-w-90p">关联的任务名称</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect5"
							:single-search="false"
							:filter-data="filterData"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>

					<template slot-scope="text, record">
						<span style="display: block">{{
							record.OptRelatedTaskName
						}}</span>
					</template>
				</a-table-column>
				<!-- 事件受理人 -->
				<a-table-column
					key="OptAcceptUserId"
					data-index="OptAcceptUserId"
					width="110px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(11)
						}
					"
				>
					<span slot="title" class="min-w-90p">事件受理人</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect5"
							:single-search="false"
							:filter-data="filterData"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>

					<template slot-scope="text, record">
						<span style="display: block">{{
							record.OptAcceptUserId
						}}</span>
					</template>
				</a-table-column>
				<!-- 事件处理人 -->
				<a-table-column
					key="OptProcessUserId"
					data-index="OptProcessUserId"
					width="110px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(12)
						}
					"
				>
					<span slot="title" class="min-w-90p">事件处理人</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect5"
							:single-search="false"
							:filter-data="filterData"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>

					<template slot-scope="text, record">
						<span style="display: block">{{
							record.OptProcessUserId
						}}</span>
					</template>
				</a-table-column>
				<!-- 状态-->
				<a-table-column
					key="OptStatus"
					data-index="OptStatus"
					width="110px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(13)
						}
					"
				>
					<span slot="title" class="min-w-90p">状态</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect5"
							:single-search="false"
							:filter-data="filterData"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>

					<template slot-scope="text, record">
						<span
							style="display: block"
							v-if="record.OptStatus == 1"
						>
							处理中
						</span>
						<span
							style="display: block"
							v-else-if="record.OptStatus == 2"
						>
							已解决
						</span>
						<span style="display: block" v-else> 已关闭 </span>
					</template>
				</a-table-column>
				<!-- 事件处理记录描述------------------ -->
				<a-table-column
					key="OptProcessDescribe"
					data-index="OptProcessDescribe"
					width="170px"
				>
					<span slot="title" class="min-w-90p">
						<!-- {{ $t('user.verification-code.required1115661311111') }} -->
						事件处理记录描述
						<!-- <img
							src="@/assets/homePage/op.png"
							alt=""
							style="
								width: 16px;
								display: inline-block;
								cursor: pointer;
							"
							@click="DpiaUpdate()"
						/> -->
					</span>

					<template slot-scope="text, record">
						<span style="display: block">{{
							record.OptProcessDescribe
						}}</span>
					</template>
				</a-table-column>
				<!-- 操作 -->
				<a-table-column
					key="action"
					:title="$t('menu.exception.not-find')"
					width="80px"
					fixed="right"
				>
					<template slot-scope="record">
						<span>
							<a-dropdown>
								<a-button type="link">
									<a-icon type="more" />
								</a-button>
								<template #overlay>
									<a-menu>
										<a-menu-item>
											<a-button
												type="link"
												@click="Editor(1, record.Id)"
												>编辑
											</a-button>
										</a-menu-item>
										<a-menu-item>
											<a-button
												type="link"
												@click="Editor(2, record.Id)"
												>查看
											</a-button>
										</a-menu-item>
									</a-menu>
								</template>
							</a-dropdown>
						</span>
					</template>
				</a-table-column>
			</a-table>
			<!-- 分页 -->
			<a-pagination
				size="small"
				v-model="pagination.current"
				:total="pagination.total"
				hideOnSinglePage
				:pageSize.sync="pagination.pageSize"
				@change="getList()"
			/>
		</a-card>
        <NewOperation
			:mode="mode"
			:riskId="riskId"
			:editId="editId"
			ref="NewOperation"
			@getList="getList"
			@succeed="getList"
		>
		</NewOperation>
	</div>
</template>

<script>
import form from '@/locales/lang/zh-CN/form'
import { getUserInfo } from '@/api/index'
import {
	dpiaGroup,
	dpiaLists,
	statisticalDatalist,
	DpiaList,
	downexport,
	optrecord,
	Opgroup,
} from '@/api/dpia/form'
import { taskSelect } from '@/api/risk/form'
import axios from 'axios'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import qs from 'qs'
import jwt from 'jwt-simple'
import moment from 'moment'
import tableSelect from '@/components/tableSelect/tableSelect.vue'
import NewOperation from './NewOperation.vue'
export default {
	name: 'myPortal',
	components: { tableSelect,NewOperation },
	data() {
		return {
			listData: [],
			cardList: [],
			queryForm: {
				QueryStartTime: '', //开始
				QueryEndTime: '', // 结束
				DpiaUpdateTimeOrder: 'DESC',
			},
			pagination: {
				current: 1, //当前页
				pageSize: 10, //每页条数
				total: 0, //总条数
				showQuickJumper: true,
				hideOnSinglePage: true,
			},
			listData: [],
			caogao: [
				{
					text: 'CU',
					value: 'CU',
				},
				{
					text: 'HR',
					value: 'HR',
				},
				{
					text: 'TH',
					value: 'TH',
				},
				{
					text: 'VH',
					value: 'VH',
				},
			],
			// 暂时存用户数据
			userdata: {},
			listLoading: true,
			//搜索筛选合并
			setValusKey: '',
			filterData: [],
			kvMap: [
				'',
				'OptId',
				'OptDescribe',
				'OptSource',
				'OptCreateUserId',
				'OptCreateUserEmail',
				'OptCreateUserDepartment',
				'OptCreateTime',
				'OptFinishTime',
				'OptRelatedModule',
				'OptRelatedTaskName',
				'OptAcceptUserId',
				'OptProcessUserId',
				'OptStatus',
				'',
			],
			okyMap: [
				'',
				'OptId',
				'OptDescribe',
				'OptSource',
				'OptCreateUserId',
				'OptCreateUserEmail',
				'OptCreateUserDepartment',
				'OptCreateTime',
				'OptFinishTime',
				'OptRelatedModule',
				'OptRelatedTaskName',
				'OptAcceptUserId',
				'OptProcessUserId',
				'OptStatus',
			],
			DpiaUpdateTimeOrder: 'DESC',
            //新增
            ModalText: 'Content of the modal',
			visible: false,
			confirmLoading: false,
			riskId: 0,
			editId: 0,
		}
	},

	created() {
		this.init()
	},
	methods: {
		// 查询Filter逻辑
		async setValus(typeId) {
			// console.log('typeId',typeId);
			this.listLoading = true
			try {
				// 调用查询列表
				const { data } = await Opgroup({ Condition: typeId })
				console.log('data0',data);
				// 赋值类型，用于筛选、搜索的直接调用
				// 为了使中文状态下还是中文
				this.setValusKey = typeId
				if (typeId === 9) {
				  for (let i = 0; i < data.length; i++) {
				    data[i].text = data[i].textEn
				  }
				}
				// 决定中文状态下是英文
				// 赋值筛选的列表，直接赋值
				this.filterData = data
			} catch (error) {
				// 报错信2
				this.$message.error(error)
				console.log(error)
			} finally {
				// 不管成功失败都会执行
				this.listLoading = false
			}
		},
		/**
		 * 清空查询数据，并且执行查询
		 * @returns {Promise<void>}
		 */
		async tableCleanJobs(type) {
			console.log(type)
			this.pagination.page = 1
			if (type === 'part') {
				this.queryForm[this.kvMap[this.setValusKey]] = undefined
				this.queryForm[this.okyMap[this.setValusKey]] = undefined
			} else {
				this.queryForm = {}
				for (let i = 1; i <= 8; i++) {
					let dom = this.$refs[`tableselect${i}`]
					if (dom) {
						dom.inputValue = ''
						dom.inputCheckValue = []
					}
				}
			}
			this.inputValue = ''
			await this.getList()
		},

		/**
		 * 列表搜索查询
		 * @param e 搜索的值
		 * @returns {Promise<void>}
		 */
		async searchQuery(e) {
			console.log(
				'this.kvMap[this.setValusKey]',
				this.kvMap[this.setValusKey]
			)
			this.queryForm[this.kvMap[this.setValusKey]] = undefined
			this.queryForm = {
				...this.queryForm,
				[this.okyMap[this.setValusKey]]: e,
			}
			await this.getList('filter')
			this.queryForm = {}
		},

		/**
		 * 列表筛选查询
		 * @param e 筛选的值
		 * @returns {Promise<void>}
		 */
		async searchQueryFilter(e) {
			this.queryForm[this.okyMap[this.setValusKey]] = undefined
			console.log('this.okyMap', this.setValusKey)
			this.queryForm = {
				...this.queryForm,
				[this.kvMap[this.setValusKey]]:
					this.setValusKey === 2 ? e.replaceAll('/', '#@%$') : e,
			}
			await this.getList('filter')
		},

		async shlist(type) {
			// this.DpiaStatus = type
			this.listLoading = true
			if (type == 'all') {
				this.tableCleanJobs(type)
				setTimeout(() => {
					this.listLoading = false
				}, 600)
			} else {
				this.queryForm = {
					...this.queryForm,
					DpiaStatus: type,
				}
				const { data } = await dpiaLists({
					...{ page: 1, pageSize: 10 },
					...this.queryForm,
				})

				console.log('async getList1', this.queryForm)
				// 解构赋值
				const { Page, PageSize, Total, Lists } = data

				// 给table赋值
				this.listData = Lists || []

				// 给分页数据赋值
				this.pagination = {
					current: Page,
					pageSize: PageSize,
					total: Total,
				}
				// this.listLoading = false
				setTimeout(() => {
					this.listLoading = false
				}, 600)
			}
		},

		async init() {
			if (localStorage.getItem('lang') == '"zh-CN"') {
				this.itLang = true
			} else if (localStorage.getItem('lang') == '"zh-EN"') {
				this.itLang = false
			}
			this.getList()
		},
		async getList(state) {
			this.listData = []
			this.listLoading = true
			const { current, pageSize } = this.pagination
			try {
				if (state == 'filter') {
					// 调用查询列表
					const { data } = await optrecord({
						...{ page: 1, pageSize: 10 },
						...this.queryForm,
					})
					// 解构赋值
					const { Page, PageSize, Total, Lists } = data
					// 给table赋值
					this.listData = Lists || []
					// 给分页数据赋值
					this.pagination = {
						current: Page,
						pageSize: PageSize,
						total: Total,
					}
				} else {
					// 调用查询列表
					const { data } = await optrecord({
						...{ page: current, pageSize },
						...this.queryForm,
					})
					// 解构赋值
					const { Page, PageSize, Total, Lists } = data
					// 给table赋值
					this.listData = Lists || []
					// 给分页数据赋值
					this.pagination = {
						current: Page,
						pageSize: PageSize,
						total: Total,
					}
				}
			} catch (error) {
				// 报错信息
				this.$message.error(error)
				console.log(error)
			} finally {
				// 不管成功失败都会执行
				this.listLoading = false
			}
		},
		rollback() {
			this.$router.push({ path: '/DashBoard' })
		},
		// 导出
		async exports() {
			// const { data } = await downexport({ lang:1 })
			let id = ''
			try {
				const data = await axios({
					url: `${process.env.VUE_APP_BASE_API}/v1/optrecord/export`,
					method: 'post',
					params: {},
					data: {
						...this.queryForm,
					},
					headers: {
						token: storage.get(ACCESS_TOKEN),
						tokens: storage.get('bmwToken') || '',
						YtAuth: jwt.encode({ bmw: 1 }, 'jwt'),
					},
					responseType: 'arraybuffer',
				})
				console.log(data)
				if (data.status === 200) {
					const url = window.URL.createObjectURL(
						new Blob([data.data], {
							type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
						})
					)
					const link = document.createElement('a')
					link.style.display = 'none'
					link.href = url
					link.setAttribute(
						'download',
						`DPIA统计${moment().format('L')}.xls`
					)
					document.body.appendChild(link)
					link.click()
					document.body.removeChild(link)
				} else {
					this.$message.error(
						this.$t(
							'user.verification-code.required111566110577327'
						)
					)
				}
			} catch (error) {
				this.$message.error(error)
			}
		},
		async Temi() {
			this.getList()
		},
		onChange(date, dateString) {
			this.queryForm.QueryStartTime = dateString[0] //开始
			this.queryForm.QueryEndTime = dateString[1] // 结束
		},
		async DpiaUpdate() {
			if (this.DpiaUpdateTimeOrder == 'DESC') {
				//升序
				this.DpiaUpdateTimeOrder = 'ASC'
				this.queryForm.DpiaUpdateTimeOrder = 'ASC'
				this.getList()
			} else {
				// 降序
				this.DpiaUpdateTimeOrder = 'DESC'
				this.queryForm.DpiaUpdateTimeOrder = 'DESC'
				this.getList()
			}
		},
		async Editor(state, editId) {
			this.$refs.NewOperation.openAction(state, editId)
		},
	},
}
</script>
<style lang="less" scoped>
/deep/ .ant-table-thead {
	background: #f4f7ff;
	font-weight: 700;
}

.ant-pagination {
	float: right;
}

.Title {
	font-size: 36px;
	font-weight: 500;
	line-height: 42px;
	letter-spacing: 0em;
	text-align: left;
	margin-bottom: 10px;
}

.Title1 {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0em;
	text-align: left;
	margin-bottom: 10px;
	margin-left: 45px;
}

.Title2 {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0em;
	text-align: left;
	margin-bottom: 10px;
	margin-left: 55px;
}

.card {
	display: flex;
	flex-direction: row;
	width: 60%;
	border: 1px solid #ccc;
	border-radius: 4px;
	height: 310px;
	margin: 15px 0;
}

.card_le {
	width: 18px;
	background: rgba(164, 201, 234, 1);
}

.card_ri {
	width: 100%;
	background: #fff;
}

.card_ri .Dpia {
	height: 44px;
	line-height: 44px;
	border-bottom: 1px solid #ccc;
	width: 100%;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0em;
	text-align: left;
	padding-left: 15px;
}

.TotaNua {
	display: flex;
	width: 100%;
	justify-content: center;
	font-size: 44px;
	color: #1890ff;
}

.Tota {
	display: flex;
	width: 100%;
	justify-content: center;
	font-size: 16px;
}

.Dra {
	display: flex;
	justify-content: space-around;
	flex-wrap: nowrap;
	margin-top: 33px;
	padding-bottom: 15px;
	border-bottom: 1px solid #ccc;
}

.Foos {
	font-size: 18px;
	cursor: pointer;
}

.Pa {
	height: 5px;
	width: 90px;
	background: #ccc;
	position: absolute;
	top: 0px;
	left: 50%;
	cursor: pointer;
}

.manipulate {
	position: absolute;
	right: 0;
	margin-top: -24px;
	background: rgba(255, 255, 255, 0.9);
	height: 46px;
	line-height: 49px;
}

.icon {
	font-size: 18px;
	margin: 0 40px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	border-radius: 50%;
}

.icon:hover {
	background-color: #757575;
	border-radius: 50%;
	text-align: center;
	width: 30px;
	height: 30px;
	line-height: 30px;
}

.timeline-item-green {
	color: green;
}

.timeline-item-red {
	color: red;
}

.timeline-item-gray {
	color: gray;
}
.Temi {
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
}
</style>
